<template>

    <div class="div-asider">

      <el-menu
        class="el-menu-vertical-demo"
        style="border-right: 1px;"
      >
      <el-menu-item index="0" @click="() => router.push('/index')">
        <el-icon><House /></el-icon>
                  <span>控制面板</span>
        </el-menu-item>
        <el-menu-item index="1" @click="() => router.push('/user')">
          <el-icon><user /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><document /></el-icon>
          <span>图书管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><CreditCard /></el-icon>
          <span>借阅管理</span>
        </el-menu-item>


        <el-sub-menu index="4">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">设置1</el-menu-item>
            <el-menu-item index="1-2">设置2</el-menu-item>
          </el-menu-item-group>

        </el-sub-menu>
      </el-menu>

    </div>
    
</template>
    
<script setup>
import {useRouter,useRoute} from 'vue-router'


const router = useRouter()
const route = useRoute()


</script>

<style scoped>
.div-asider{
    width: 200px;
    height: 1000vh;
    
}
</style>